<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>

<%--添加入库--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<html>
<head>
    <title>用户信息展示</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css" media="all">
    <style>
        /*解决普通复选框无上边框问题*/
        .laytable-cell-1-0-0 .layui-icon {
            margin-top: 5px !important;
        }
        /*解决横条复选框无上边框问题*/
        .layui-table-view .layui-form-checkbox{
            margin-top:0px !important;
        }
    </style>
</head>
<body>

<div class="demoTable layui-form" style="margin-top: 30px; margin-left: 12%">
    <div class="demoTable layui-form" style="margin-top: 30px; margin-left: 0px">
        <form>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 96.5px">采购人：</label>
                <div class="layui-input-inline">
                    <input type="tel" name="pname"  id="pname" autocomplete="off" placeholder=" 请输入采购人姓名 " class="layui-input">
                </div>
                <label class="layui-form-label" style="width: 96.5px">采购审批人：</label>
                <div class="layui-input-inline">
                    <input type="tel" name="ename"  id="ename" autocomplete="off" placeholder=" 请输入采购审批人姓名 " class="layui-input">
                </div>
<%--                <label class="layui-form-label" style="width: 120px">采购审批日期范围:</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" class="layui-input" name="cedate" id="test10" placeholder=" 请选择时间 " style="width: 300px">--%>
<%--                </div>--%>
            </div>
        </div>

        <div class="layui-form-item" style="padding-left: 25%">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit=""  id="serachBtn" lay-filter="demo1">立即查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>

    </div>
</div>

<%--<table id="demo" lay-filter="test">--%>
<table id="demo" class="layui-table" lay-filter="test"></table>
<div hidden id="tempTabel" style="text-align: center">
    <div style="width: 550px" class="layui-inline" >
        <table class="layui-hide" id="instorageDetailTab" lay-filter="test"></table>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">

            采购申请人:  <i class="layui-icon layui-icon-username" id="cgPeople" style="font-size: 15px; color: black;"></i>
        </div>
        <div class="layui-col-md4">
            总金额: <i class="layui-icon layui-icon-rmb" id="cgPrice" style="font-size: 15px; color: black;"></i>
        </div>
        <div class="layui-col-md4">
            时间:<i class="layui-icon layui-icon-time" id="cgDate" style="font-size: 15px; color: black;"></i>
        </div>
    </div>
</div>
</body>

<script src="${pageContext.request.contextPath}/layui/layui/layui.js" charset="utf-8"></script>

<%--表头工具栏 id详见表格script中表头工具栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-container">
        <button class="layui-btn layui-btn-sm" lay-event="reload">刷新表格</button>
        <button class="layui-btn layui-btn-sm" lay-event="getAll">添加入库申请</button>
    </div>
</script>

<%--表格工具栏 id详见表格script中表格工具栏--%>
<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">通过入库申请</a>
    </div>
</script>


<script>
    //js方式获取本地时间+1天 
    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    }

    layui.use(['laydate','table','jquery','form'], function () {
        //加载table模块
        var $ = layui.$ //重点处
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //加载table实例
        $(function () {
            showTable();
        })

        //日期时间范围
        var value1;
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
            ,calendar: true
            ,max:tomorrowTime
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        //根据条件查询 重载表格
        $("#serachBtn").on("click",function () {
            if (value1 == "" || value1 == undefined){
                valuedate = "";
            }else {
                valuedate = value1;
            }
            table.reload('temp', {
                page: {
                    curr: 1
                },
                where: {
                    cedate: valuedate+"",
                    ename: $("#ename").val(),
                    pname: $("#pname").val()
                }
            });
        });
        //重置搜索框
        $("#reset").click(function () {
            $("#edate").val(""),
                $("#ename").val(""),
                $("#pname").val("")
            //重新加载一下select框
            form.render()
            table.reload('temp', {
                page: {
                    curr: 1
                },
                where: {
                    pdate: null,
                    ename: null,
                    pname: null
                }
            });
        })

        function showTable(){
            table.render({
                elem: '#demo' //绑定容器的id属性值
                ,url: '${pageContext.request.contextPath}/outStorageHistory/queryAllIns' //数据接口
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,10,15]
                ,id:'temp'
                ,text: {
                    none: '暂无历史申请入库订单，摸会鱼吧！' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
                ,cols: [[ //表头
                    {field: 'checkbox', title: '选择' , type: "checkbox" }
                    ,{field: 'bookid', title: '书籍id', hide:true}
                    ,{field: 'pid', title: 'pid', hide:true}
                    ,{field: 'bookname', title: '书籍名称',width: '12%',hide: true}
                    ,{field: 'author', title: '作者',hide: true}
                    ,{field: 'publisher', title: '出版社',hide: true}
                    ,{field: 'booktype', title: '书籍类型',width: '8%',hide: true}
                    ,{field: 'count', title: '数量',hide: true}
                    ,{field: 'price', title: '进价',hide: true}

                    ,{field: 'aa', title: '序号', type: "numbers", sort: true,width: '5%'}
                    ,{field: 'total_price', title: '总金额',width:94,sort:true}
                    ,{field: 'total_count', title: '总数量',width:94,sort:true}
                    ,{field: 'pname', title: '采购人' }
                    ,{field: 'pdate', title: '采购日期',width: '13%',sort:true}
                    ,{field: 'ename', title: '采购审批人'}
                    ,{field: 'edate', title: '采购审批日期',width: '13%',sort:true}
                    ,{field: 'status', title: '状态' ,align: 'center',templet: function (d) {
                            if (d.status == 2){
                                return "<button class='layui-btn layui-btn-xs layui-btn-danger layui-btn-radius disabled'>待入库申请</button>";
                            }
                        },width: '8%'}
                    //设置表格工具栏
                    ,{field: 'bb', title: '操作',toolbar:"#barDemo",width: "15%"}
                ]],
                //设置表头工具栏
                toolbar:"#toolbarDemo"
            });
        }

        /*
        * 头监听事件
        * demo表示的是勇气上设置的lay-filter属性值
        * */
        table.on('toolbar(test)',function (obj) {
            //获取当前table对象中所有id属性值，也就是当前容器demo的ID属性值
            //获取当前表格被选中记录对象，返回数据
            var checkStatus = table.checkStatus(obj.config.id);
            //获取事件名
            var eventName = obj.event;
            //判断事件名进行对应方法的执行
            switch (eventName) {
                case "reload":
                    showTable();
                    break;
                case "getAll":
                    layer.open({
                        type:2,
                        content:['${pageContext.request.contextPath}/views/outstorage/urgencyinstorage2.jsp','no'],
                        offset:'10px',
                        area:['1100px','600px']
                    });
                    break;
                default:
                    layer.msg("请稍后")
                    break;
            }
        });

        /*
        监听行工具栏事件
        */
        var datas = [];
        table.on('tool(test)',function (obj) {
            //获取当前操作行的相关
            var tr = obj.data;
            //console.log(tr);
            //得到事件名
            var eventName = obj.event;
            switch (eventName) {
                case "detail":
                    $.ajax({
                        url: '${pageContext.request.contextPath}/outStorageCheck/queryAllDetail1',
                        dataType: "json",
                        type: "post",
                        data: {"pid": tr.pid},
                        success: function (purDetObj) {
                            var a = purDetObj.data
                            datas = [];
                            //循环把数组中的数据放入datas中
                            for (let i = 0; i < a.length; i++) {
                                datas.push(a[i])
                            }
                            //重载表格把json类型的数据给data
                            table.reload('demo1', {
                                page: {
                                    curr: 1
                                },
                                data:datas
                            });
                            $("#cgPeople").text(tr.pname)
                            $("#cgPrice").text(tr.total_price)
                            $("#cgDate").text(tr.pdate)
                            layer.open({
                                type: 1
                                , title: '入库申请详情信息'
                                , content: $("#tempTabel")
                                , area: '600px'
                            });
                        }
                    });
                    showTable();
                    break;
                case "edit":
/*                    console.log(tr.pid);
                    /!*console.log(JSON.stringify(tr));*!/*/
                    var index = layer.open({
                        type:2,
                        content:['${pageContext.request.contextPath}/views/outstorage/urgencyinstorage2.jsp?ppid='+tr.pid, 'no'],
                        area:['1100px','610px']
                    });
                    //接收从子页面传来的数据
                    window.addEventListener('message',function(e){
                        let data =   e.data;//接收从子页面传来的数据
                        if (data.code == 1) {
                            layer.msg(data.msg, {icon: 1});
                            layer.close(index); //再执行关闭
                            showTable();
                        } else {
                            layer.msg(data.msg, {icon: 5})
                            showTable();z
                        }
                    },false);
                    break;
                default:
                    layer.msg("出错了");
                    break;
            }
        });
        table.render({
            elem: '#instorageDetailTab'
            , data: datas
            , page: true
            , limit: 5
            , limits: [5, 10, 15]
            , id: "demo1"
            , cols: [[
                {field: 'aa', title: '序号', type: "numbers", sort: true,width: 80, align: 'center',}
                ,{field: 'bookid', title: 'bookid', width: 80, align: 'center',hide:true}
                , {field: 'bookname', title: '图书名称', width: 100, align: 'center'}
                , {field: 'author', title: '作者', width: 100, align: 'center'}
                , {field: 'booktype', title: '图书类型', width: 100, align: 'center'}
                , {field: 'count', title: '数量', width: 85, align: 'center'}
                , {field: 'price', title: '进价', width: 80, align: 'center'}
            ]]
        });

    });
</script>

</html>

</html>
